<template>
  <div>
    <el-table
      :data="tableList"
      style="width: 100%"
    >

      <el-table-column
        label=""
        width="88"
        type="expand"
      >
        <template slot-scope="scope">
          <el-descriptions title="">
            <el-descriptions-item label="服务类型">{{ scope.row.orderTakeRolename }}</el-descriptions-item>
            <el-descriptions-item label="单号">{{ scope.row.orderNo }}</el-descriptions-item>
            <el-descriptions-item label="地址">{{ scope.row.projectAddress }}</el-descriptions-item>
            <el-descriptions-item label="定位距离">{{ scope.row.projectAddress }}</el-descriptions-item>
            <el-descriptions-item label="指定时段">
              <div>{{ scope.row.timeLimitStart }}-{{ scope.row.timeLimitEnd }}</div>
            </el-descriptions-item>
            <el-descriptions-item label="备注">{{ scope.row.notes }}</el-descriptions-item>
            <el-descriptions-item label="照片">
              <el-row :gutter="24">
                <el-col :span="6">
                  <el-image style="width: 100px; height: 100px"
                    :src="scope.row.productImg"
                    fit="fit">
                  </el-image>
                </el-col>
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
              </el-row>
            </el-descriptions-item>
            <el-descriptions-item label="附件">
              <el-row :gutter="24">
                <el-col :span="6">
                  <el-image style="width: 100px; height: 100px"
                    :src="scope.row.attachment"
                    fit="fit">
                  </el-image>
                </el-col>
              </el-row>
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </el-table-column>

      <el-table-column
        prop="orderTakeRolename"
        label="服务"
      />
      <el-table-column
        prop="status"
        label="订单状态"
        width="180"
      >
        <template slot-scope="scope" v-if="scope.row.status">
          <el-tag type="success">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderUserName"
        label="订单师傅"
        width="180"
      />

      <el-table-column
        prop="date"
        label="报价列表"
        width="180"
      >
        <template slot-scope="scope">
          <el-button type="success" size="small" @click.native.prevent="onOpenDetail(scope.row)">点击预览</el-button>
        </template>
      </el-table-column>

      <el-table-column
        prop="createTime"
        label="下单时间"
        width="100"
      />

      <el-table-column
        prop="quoteCnt"
        label="浏览人数"
        width="100"
      ></el-table-column>

      <el-table-column
        label="操作"
        fixed="right"
        width="220"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="onForceCancel(scope.row)">强制取消</el-button>
          <el-button type="primary" size="small" @click="onForceFinished(scope.row)">强制完成</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="报价列表"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose">
      <PriceListView :orderId="selectOrderId" @dismissHandle="handleClose" :isAdmin="true" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import PriceListView from "@/views/want_order/price_list.vue";
import { takeOrderForceFinish, takeOrderForceCancel } from '@/api/yzOrder';

export default ({
  name: 'OrderManagerTable',
  components: {
    PriceListView
  },
  props: {
    tableList: []
  },
  data() {
    return {
      dialogVisible: false,
      selectOrderId: '',
      imgList: []
    }
  },
  mounted() {

  },
  methods: {
    onOpenDetail(row) {
      this.selectOrderId = row.id;
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    // 强制取消
    async onForceCancel(rowData) {
      const { data } = await takeOrderForceCancel(rowData);
      // console.log('onForceCancel', data)
      if (data.code === 200) {
        this.$message({ message: '强制取消成功', type: 'success'});
      } else {
        this.$message({
          message: data.msg || '强制取消失败',
          type: 'error',
          showClose: true,
          duration: 3000,
        });
      }
    },
    // 强制完成
    async onForceFinished(rowData) {
      const { data } = await takeOrderForceFinish(rowData);
      // console.log('onForceFinished', data)
      if (data.code === 200) {
        this.$message({ message: '已强制完成', type: 'success'});
      } else {
        this.$message({
          message: data.msg || '强制完成失败',
          type: 'error',
          showClose: true,
          duration: 3000,
        });
      }
    }
  }
})

</script>
